<template>
    <div class="pieChart" ref="chartContainer"></div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';

const props = defineProps({
    data: {
        type: Array<any>,
        required: true
    },
});

const chartContainer = ref<any>(null);
let myChart = null as any;

// 动态计算对应的像素值
function getPixels(vw:number) {
    return (window.innerWidth * vw) / 1920;
}

const updateChart = () => {
    if (!chartContainer.value) return;

    // Initialize the chart
    myChart = echarts.init(chartContainer.value);

    // Define chart options
    const option = {
        color: ['#00E3FE', '#FFC600', '#00C0FF', '#5672FF', '#FF5757'], // 自定义颜色数组
        tooltip: {
            trigger: 'item',
        },
        legend: {
            orient: "vertical" /*标签文字垂直*/,
            left: "right",
            padding: [0, 30, 0, 0],  // 上右下左的内边距，右边留出10px的空隙
            top: 'center',// 居中展示
            align: 'left',
            icon: "circle",
            // itemWidth: 10, // 设置图标的宽度
            // itemHeight: 10, // 设置图标的高度
            itemWidth: getPixels(10), // 设置图标的宽度
            itemHeight: getPixels(10), // 设置图标的高度
            textStyle: {
                // fontSize: 12,       // 设置文字的大小
                fontSize: getPixels(12), // 将 2vw 转换为像素值,
                color: "#fff",
            },
            formatter: function (name: string) {
                let value = props.data.find((item: any) => item.name == name).value;
                const sum = props.data.reduce((acc: any, item: any) => acc + Number(item.value), 0);
                let percent = Math.round(value / sum * 100);
                return `${name}  ${percent}%   ${value}`;  // 格式化显示
            }
        },
        series: [
            {
                name: '',
                type: 'pie',
                radius: ['70%', '80%'],
                center: ["22%", "50%"],
                padAngle: 5,
                avoidLabelOverlap: false,
                label: {
                    show: false
                },
                emphasis: {
                    label: {
                        show: false,
                        fontSize: 12,
                        fontWeight: 'normal',
                    }
                },
                data: props.data,
            },
            {
                // 内环
                type: "pie",
                radius: ["0", "55%"],
                center: ["22%", "50%"],
                silent: true, //取消高亮
                data: [1],
                itemStyle: {
                    // 使用 linearGradient 创建从上到下的渐变
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: 'rgba(0,204,228,0.3)' },  // 渐变的起始颜色（上）
                        { offset: 1, color: 'rgba(0,204,228,0)' }   // 渐变的结束颜色（下）
                    ])
                },
                label: {
                    show: false,
                },
            },
        ],
        graphic: [
            {
                type: 'text',
                left: '17%', // 水平居中
                top: '40%', // 稍微上移以便腾出空间
                style: {
                    text: '500',
                    textAlign: 'center', // 水平居中
                    textVerticalAlign: 'middle', // 垂直居中
                    font: '16px DIN', // 字体样式和大小
                    fill: '#F4A906 ' // 文字颜色（第一行文字的颜色）
                },
                z: 10
            },
            {
                type: 'text',
                left: '18%', // 水平居中
                top: '58%', // 稍微下移，确保第二行文字显示不重叠
                style: {
                    text: '总数',
                    textAlign: 'center', // 水平居中
                    textVerticalAlign: 'middle', // 垂直居中
                    font: '10px DIN', // 字体样式和大小
                    fill: '#00E3FE' // 文字颜色（第二行文字的颜色）
                },
                z: 10
            }
        ]

    };
    console.log(option);

    // Set options
    myChart.setOption(option);

    // Handle resize
    window.addEventListener('resize', () => {
        myChart.resize();
        option.legend.textStyle.fontSize = getPixels(12); // 重新计算字体大小
        option.legend.itemWidth = getPixels(10); // 重新计算字体大小
        option.legend.itemHeight = getPixels(10); // 重新计算字体大小
        myChart.setOption(option); // 更新图表
    });
};

// Watch for data changes and update the chart
watch(() => props.data, () => {
    if (myChart) {
        updateChart();
    }
}, { immediate: true });

onMounted(() => {
    updateChart();
});
</script>

<style lang="scss" scoped>
.pieChart {
    width: 100%;
    // height: vw(133);
    height: vh(150);
}
</style>